<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta name="author" content="Darko Bunic"/>
		<meta name="description" content="Drag and drop table content/rows with JavaScript"/>
		<meta name="viewport" content="width=device-width, user-scalable=no"/><!-- "position: fixed" fix for Android 2.2+ -->
		<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
		<script type="text/javascript" src="redips-drag-min.js"></script>
		<!-- initialize drag and drop -->
		<script type="text/javascript">
			// after page is loaded, initialize DIV elements inside tables
			window.onload = function () {
				// reference to the REDIPS.drag library
				var	rd = REDIPS.drag;
				// initialization
				rd.init();
				// set hover color
				rd.hover.color_td = '#E7C7B2';
				// set drop option to 'shift'
				rd.drop_option = 'shift';
				// set shift mode to vertical2
				rd.shift_option = 'vertical2';
				// enable animation on shifted elements
				rd.animation_shift = true;
				// set animation loop pause
				rd.animation_pause = 20;
				// display action in the message line (list of all event handlers can be found at the drag.js bottom)
				rd.myhandler_clicked	= function () {document.getElementById('message').innerHTML = 'Element is clicked'}
				rd.myhandler_moved		= function () {document.getElementById('message').innerHTML = 'Element is moved'}
				rd.myhandler_notmoved	= function () {document.getElementById('message').innerHTML = 'Element is not moved'}
				rd.myhandler_dropped	= function () {document.getElementById('message').innerHTML = 'Element is dropped'}
			}
		</script>
		<title>www.redips.net</title>
	</head>
	<body>
		<center>
			<h2><a href="http://www.redips.net/javascript/drag-and-drop-table-content/" title="www.redips.net">REDIPS_drag</a> / <a href="http://www.redips.net/javascript/redips-drag-documentation/" title="REDIPS.drag documentation">Documentation</a> / <a href="http://www.redips.net/javascript/redips-drag-documentation-appendix-a/" title="REDIPS.drag documentation - Appendix A">Appendix A</a></h2>
			<h3>Drag and drop table content/rows with JavaScript - Version 4.6.11</h3>
		</center>
		<!-- tables inside this DIV could have draggable content -->
		<div id="drag">
			<table id="table1">
				<!-- define table columns -->
				<colgroup>
					<col width="240"/>
					<col width="240"/>
					<col width="240"/>
				</colgroup>
				<!-- message line -->
				<tr>
					<th colspan="3" id="message" class="mark" title="Message line">Message line</th>
				</tr>
				<!-- table data -->
				<tr>
					<td><div id="link1" class="drag t1">Example 00<br/><a href="example00/index1.html">Minimal steps</a> / <a href="example00/index2.html">AJAX jQuery</a></div></td>
					<td><div id="link1" class="drag t1">Example 08<br/><a href="example08/">Tables in separated containers</a></div></td>
					<td><div id="link1" class="drag t1">Example 16<br/><a href="example16/">AJAX, hover, sticky, dragging</a></div></td>
				</tr>
				<tr>
					<td><div id="link1" class="drag t1">Example 01<br/><a href="example01/">Three tables</a></div></td>
					<td><div id="link1" class="drag t1">Example 09<br/><a href="example09/">Single and shift mode</a></div></td>
					<td><div id="link1" class="drag t1">Example 17<br/><a href="example17/">Move object (animation)</a></div></td>
				</tr>
				<tr>
					<td><div id="link1" class="drag t1">Example 02<br/><a href="example02/">Green and orange elements</a></div></td>
					<td><div id="link1" class="drag t1">Example 10<br/><a href="example10/">Sticky tables</a></div></td>
					<td><div id="link1" class="drag t1">Example 18<br/><a href="example18/">Simple element animation</a> / <a href="example18/index1.html">row</a></div></td>
				</tr>
				<tr>
					<td><div id="link1" class="drag t1">Example 03<br/><a href="example03/index.php">School timetable</a> (<a href="example03/index_static.html">static</a>)</div></td>
					<td><div id="link1" class="drag t1">Example 11<br/><a href="example11/">Drag handle on titlebar</a></div></td>
					<td><div id="link1" class="drag t1">Example 19<br/><a href="example19/">Groups and table rows</a></div></td>
				</tr>
				<tr>
					<td><div id="link1" class="drag t1">Example 04<br/><a href="example04/">Tic Tac Toe</a></div></td>
					<td><div id="link1" class="drag t1">Example 12<br/><a href="example12/">Select and move more elements</a></div></td>
					<td><div id="link1" class="drag t1">Example 20<br/><a href="example20/">Clone and delete table rows</a></div></td>
				</tr>
				<tr>
					<td><div id="link1" class="drag t1">Example 05<br/><a href="example05/">Scrollable DIV containers</a></div></td>
					<td><div id="link1" class="drag t1">Example 13<br/><a href="example13/">Nested tables</a></div></td>
					<td><div id="link1" class="drag t1">Example 21<br/><a href="example21/">Shift table content</a></div></td>
				</tr>
				<tr>
					<td><div id="link1" class="drag t1">Example 06<br/><a href="example06/">Scrollable and fixed containers</a></div></td>
					<td><div id="link1" class="drag t1">Example 14<br/><a href="example14/">Sort elements in long table</a></div></td>
					<td></td>
				</tr>
				<tr>
					<td><div id="link1" class="drag t1">Example 07<br/><a href="example07/index1.html">A B C D</a> / <a href="example07/index2.html">E F</a></div></td>
					<td><div id="link1" class="drag t1">Example 15<br/><a href="example15/">Drag and drop table rows</a></div></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</table>
		</div>
	</body>
</html>